<!--
 * @Description: 
 * @Date: 2023-05-06 11:52:47
 * @LastEditors: czp
 * @LastEditTime: 2023-05-06 11:52:58
-->
<template>
	<div class="content-box">
		<div class="content-item">
			<el-form ref="ruleFormRef" :rules="rules" :model="villagerForm" label-width="68px">
				<el-form-item label="村民身份" prop="VillagerIdentity">
					<el-radio-group v-model="villagerForm.VillagerIdentity">
						<el-radio v-for="(i, index) in VillagerIdentityOptions" :key="index" :label="i.value">
							{{ i.label }}
						</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item v-if="villagerForm.VillagerIdentity == 'yuncunmin'" label="认证材料" prop="CertificationMaterials"> 材料 </el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
export interface IVillagerLevel {
	VillagerIdentity: string;
	CertificationMaterials: string;
}
const villagerForm = ref<IVillagerLevel>({
	VillagerIdentity: "",
	CertificationMaterials: ""
});
// 身份选项
const VillagerIdentityOptions = [
	{ label: "原村民", value: "jingzhucunmin" },
	{ label: "新村民", value: "xincunmin" },
	{ label: "云村民", value: "yuncunmin" },
	{ label: "荣誉村民", value: "rongyucunmin" }
];

// 表单验证
const ruleFormRef = ref<FormInstance>();
const rules = ref<FormRules>({
	realName: [{ required: true, message: "请输入真实姓名", trigger: "blur" }]
});
</script>

<style scoped lang="scss">
.submit {
	margin-top: 80px;
	margin-bottom: 40px;
	text-align: center;
	.el-button {
		--el-color-black: #ffffff;
	}
}
.content-box {
	width: 100%;
	overflow: hidden;
	background-color: #ffffff;
	.content-item {
		.title {
			display: flex;
			align-items: center;
			padding: 20px;
			font-size: 16px;
			border-bottom: 1px solid #e8e8e8;
		}
	}
}
:deep(.el-form) {
	margin-top: 41px;
	margin-left: 33px;
	.verification-box {
		--el-fill-color-light: #c39f63;
		--el-color-info: #ffffff;
	}
	.el-form-item {
		margin: 0;
		margin-bottom: 22px;
	}
	.el-input {
		width: 380px;
	}
	.el-form-item__label {
		font-weight: 700;
	}
}
</style>
